<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!-- Bootstrap -->
    <link href="<?=base_url();?>/public/resource/default/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="<?=base_url();?>/public/resource/default/css/style.css" rel="stylesheet" >

</head>
<body>

    <div class="container-fluid wp-content">

        <div class="wp-content-mbx">
            <a><span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span></a>
            <div>
                <span class="mainhead">分类目录管理</span>
                <span class="subhead">这里是其他的说明性文字</span>
            </div>
        </div>

        <div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">分类目录管理</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <!-- 操作提示框 -->
                    <div class="alert alert-success" role="alert">
                        <p>重要提示</p>
                        <a href="#" class="alert-link">...</a>
                        Heads up! This alert needs your attention, but it's not super important.
                    </div>

                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <div class="wp-panel panel-default">
                                <div class="wp-panel-heading">
                                    <span class="wp-h-mainhead">添加分类</span>
                                </div>
                                <div class="wp-panel-body">
                                    <form id="add-category-fm">
                                        <div class="form-group">
                                            <label for="iptCategoryName">分类名称</label>
                                            <input class="form-control" id="iptCategoryName" type="text" name="category_name" placeholder="分类名称">
                                        </div>
                                        <div class="form-group">
                                            <label for="">父级分类</label>
                                            <select class="form-control" name="parent">
                                                <option value="0">作为顶级分类</option>
                                                <?php foreach ($category_array as $category): ?>
                                                    <option value="<?=$category->ID?>"><?=$category->category_name?></option>
                                                <?php endforeach;?>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="iptAlias">分类别名</label>
                                            <input class="form-control" id="iptAlias" type="text" name="category_alias" placeholder="分类别名">
                                            <p class="help-block">“别名”是在URL中使用的别称，它可以令URL更美观。通常使用小写，只能包含字母，数字.</p>
                                        </div>

                                        <button type="button" class="btn btn-default" onclick="fun_add_category();">提交</button>
                                    </form>
                                    <div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-8 col-md-8">
                            <div class="wp-panel panel-default">

                                <div class="wp-panel-heading">
                                    <span class="wp-h-mainhead">分类列表</span>
                                    <span class="wp-h-subhead">共 <strong><?=count($category_array)?></strong> 条记录</span>
                                    <span class="wp-h-action">
                                        <a><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></a>
                                        <a><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a>
                                    </span>
                                </div>

                                <div class="wp-panel-tool">
                                    <div class="pull-right">
                                        <input type="text" class="dd-form-control" />
                                        <button class="btn btn-sm btn-default">搜索</button>
                                    </div>
                                    <div>
                                        <select class="dd-form-control" name="action">
                                            <option value="">批量操作</option>
                                            <option value="del">删除</option>
                                        </select>
                                        <button class="btn btn-sm btn-default" onclick="fun_do_action();">确认</button>
                                    </div>
                                    <i class="clearfix"></i>
                                </div>

                                <div class="wp-panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover wp-table">
                                            <thead>
                                            <tr>
                                                <th width="40"><input id="checkAll" type="checkbox" value=""></th>
                                                <th>分类名称</th>
                                                <th>图像描述</th>
                                                <th>分类别名</th>
                                                <th class="text-center">总数</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <?php foreach ( $category_array as $category ): ?>
                                                <tr>
                                                    <td class="td-check"><input name="check" type="checkbox" value="<?=hashids_encode($category->ID);?>"></td>
                                                    <td>
                                                        <strong><?=$category->category_name?></strong>
                                                        <br>
                                                        <div class="row-action">
                                                            <span><a href="<?=site_url(array('category','edit',hashids_encode($category->ID)))?>">快速编辑</a></span> &Iota;
                                                            <span><a class="action-danger" href="javascript:fun_del_category('<?=hashids_encode($category->ID);?>');">删除</a></span> &Iota;
                                                            <span><a href="" target="">查看</a></span>
                                                        </div>
                                                    </td>
                                                    <td></td>
                                                    <td><?=$category->category_alias?></td>
                                                    <td class="text-center">1</td>
                                                </tr>
                                            <?php endforeach;?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?=base_url();?>/public/resource/default/vendor/bootstrap/js/bootstrap.min.js"></script>

    <script src="<?=base_url();?>/public/resource/default/js/init.js"></script>


    <script>


        $(function(){
            $('#checkAll').click(function() {
                $('input[name="check"]').prop("checked",this.checked);
                var check = $("input[name='check']");
                check.click(function(){
                    $("#checkAll").prop("checked",check.length == $("input[name='check']:checked").length ? true : false);
                });
            });
        })

        function fun_add_category() {

            $.ajax({
                url:       '<?=site_url('category/add')?>',
                type:      'post',
                dataType:  'json',
                data:      $('#add-category-fm').serialize(),
                async:     false,
                success: function(response){

                    alert(response.resultMsg);

                    if (response.resultCode == CHttp.getConstant('HTTP_STATUS_SUCCESS'))
                    {
                        location.reload();
                    }
                },
                error: function(request){
                    alert('Error');
                }
            })
        }

        function fun_del_category(id) {

            if (confirm('谨慎操作,删除父级分类后其下面的子分类会自动上移一层'))
            {
                $.post(
                    '<?=site_url("category/del");?>',
                    {ids:id},
                    function(response){
                        alert(response.resultMsg);
                        if (response.resultCode == CHttp.getConstant('HTTP_STATUS_SUCCESS'))
                        {
                            location.reload();
                        }
                    },
                    'json'
                );
            }
        }


        /**
         * 批量操作
         */
        function fun_do_action()
        {
            // 获取将要执行的操作
            var action = $('select[name="action"]').val();
            if (fun_empty(action))
            {
                alert('请选择一项操作');
                return;
            }

            // 获取checkbox的值
            var checkValues = '';
            $("input:checkbox[name='check']:checked").each(function(i){
                if(0==i){
                    checkValues = $(this).val();
                }else{
                    checkValues += (","+$(this).val());
                }
            });
            if (fun_empty(checkValues))
            {
                alert('请至少选择一条记录');
                return;
            }

            switch (action)
            {
                case 'del':
                    // 调用删除菜单方法
                    fun_del_category(checkValues);
                    break;
                default :
                    break;
            }
        }

    </script>

</body>
</html>